<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="resources/file-drag-common.js"></script>
</head>
<body>
<input type="file" id="singleFile" name="upfile" onchange="singleFileSelected()" />
<input type="file" id="multipleFiles" name="upfile[]" multiple="multiple" onchange="multipleFilesSelected()" />
<div id="console"></div>
<script>
var changeDispatched;

description("This tests the condition that triggers a 'change' event on file input forms.");

if (window.testRunner) {
    var singleFileInput = document.getElementById("singleFile");
    var multipleFilesInput = document.getElementById("multipleFiles");

    debug("Test that the 'change' event is triggered on a single file form when a selected file is changed:");
    dragFilesOntoFileInput(singleFileInput, ["foo.txt"]);
    shouldBeEqualToString("singleFileInput.value", "C:\\fakepath\\foo.txt");
    shouldBeTrue("changeDispatched");

    dragFilesOntoFileInput(singleFileInput, ["bar.txt"]);
    shouldBeEqualToString("singleFileInput.value", "C:\\fakepath\\bar.txt");
    shouldBeTrue("changeDispatched");

    dragFilesOntoFileInput(singleFileInput, ["bar.txt"]);
    shouldBeEqualToString("singleFileInput.value", "C:\\fakepath\\bar.txt");
    shouldBeFalse("changeDispatched");

    dragFilesOntoFileInput(singleFileInput, ["foo.txt"]);
    shouldBeEqualToString("singleFileInput.value", "C:\\fakepath\\foo.txt");
    shouldBeTrue("changeDispatched");

    dragFilesOntoButtonInsideFileInput(singleFileInput, ["baz.png"]);
    shouldBeEqualToString("singleFileInput.value", "C:\\fakepath\\baz.png");
    shouldBeTrue("changeDispatched");

    debug("");
    debug("Test that the 'change' event is triggered on a multiple file form when a selected file is changed:");
    dragFilesOntoFileInput(multipleFilesInput, ["foo.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBeTrue("changeDispatched");

    dragFilesOntoFileInput(multipleFilesInput, ["bar.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\bar.txt");
    shouldBeTrue("changeDispatched");

    dragFilesOntoFileInput(multipleFilesInput, ["bar.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\bar.txt");
    shouldBeFalse("changeDispatched");

    dragFilesOntoFileInput(multipleFilesInput, ["foo.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBeTrue("changeDispatched");

    debug("Test that the 'change' event is triggered on a multiple file form when selected files are changed:");
    dragFilesOntoFileInput(multipleFilesInput, ["foo.txt", "bar.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBeTrue("changeDispatched");

    dragFilesOntoFileInput(multipleFilesInput, ["foo.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBeTrue("changeDispatched");

    dragFilesOntoFileInput(multipleFilesInput, ["foo.txt", "bar.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBeTrue("changeDispatched");

    dragFilesOntoFileInput(multipleFilesInput, ["foo.txt", "bar.txt", "baz.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBeTrue("changeDispatched");

    dragFilesOntoFileInput(multipleFilesInput, ["foo.txt", "bar.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\foo.txt");
    shouldBeTrue("changeDispatched");

    dragFilesOntoFileInput(multipleFilesInput, ["bar.txt", "foo.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\bar.txt");
    shouldBeTrue("changeDispatched");

    dragFilesOntoFileInput(multipleFilesInput, ["bar.txt", "foo.txt"]);
    shouldBeEqualToString("multipleFilesInput.value", "C:\\fakepath\\bar.txt");
    shouldBeFalse("changeDispatched");
}

function singleFileSelected() {
    changeDispatched = true;
}

function multipleFilesSelected() {
    changeDispatched = true;
}

function dragFilesOntoFileInput(input, files) {
    changeDispatched = false;
    dragFilesOntoInput(input, files);
}

function dragFilesOntoButtonInsideFileInput(input, files) {
    changeDispatched = false;
    eventSender.beginDragWithFiles(files);
    eventSender.mouseMoveTo(input.offsetLeft + 10, input.offsetTop + input.offsetHeight / 2);
    eventSender.mouseUp();
}
</script>
</body>
</html>
